import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:olii/common/index.dart';

import '../controller.dart';

class HistoryImageTimeline extends GetView<PlantDetailController> {
  const HistoryImageTimeline({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: controller.sorted_date_keys.isEmpty
          ? Center(
              child: Text(
                "No history images",
                style: TextStyle(color: Colors.white, fontSize: 16.sp),
              ),
            )
          : ListView.builder(
              padding: EdgeInsets.symmetric(horizontal: 24.w),
              itemCount: controller.sorted_date_keys.length,
              itemBuilder: (context, index) {
                final date_key = controller.sorted_date_keys[index];
                final image_url = controller.plant.image_list[date_key] ?? '';

                // 检查月份是否已更改
                bool show_full_date = true;
                if (index > 0) {
                  final prevDateKey = controller.sorted_date_keys[index - 1];
                  final prevDate = DateTime.parse(prevDateKey);
                  final currentDate = DateTime.parse(date_key);

                  // 仅当月份更改时显示完整日期
                  show_full_date = prevDate.month != currentDate.month;
                }

                // 时间标签小部件（仅在月份更改时显示）
                Widget dateWidget = show_full_date
                    ? Container(
                        padding: EdgeInsets.symmetric(
                          horizontal: 8.w,
                          vertical: 4.h,
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "${DateTime.parse(date_key).year}",
                              style: TextStyle(
                                color: Color(0xFFCDFF5F),
                                fontSize: 25.sp,
                                fontWeight: FontWeight.w900,
                              ),
                            ),
                            Align(
                              alignment: Alignment.topRight,
                              child: Text(
                                _get_formatted_month_day(date_key),
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 12.sp,
                                  fontWeight: FontWeight.w600,
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                    : SizedBox();

                // 图像覆盖层上的日期（MM-DD格式）
                Widget imageOverlayDate = Container(
                  padding: EdgeInsets.symmetric(horizontal: 6.w, vertical: 2.h),
                  decoration: BoxDecoration(
                    color: Colors.black.withOpacity(0.5),
                    borderRadius: BorderRadius.circular(4.r),
                  ),
                  child: Text(
                    controller.is_today(date_key)
                        ? "today"
                        : controller.is_yesterday(date_key)
                        ? "yesterday"
                        : "${DateTime.parse(date_key).month}-${DateTime.parse(date_key).day.toString().padLeft(2, '0')}",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12.sp,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                );

                return Container(
                  margin: EdgeInsets.only(bottom: 20.h),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Left side date
                      SizedBox(width: 100.w, child: dateWidget),
                      SizedBox(width: 16.w),
                      // 中间连接器
                      Container(
                        width: 6.w,
                        child: Stack(
                          alignment: Alignment.topCenter,
                          children: [
                            // 连续垂直线
                            Container(
                              width: 1.w,
                              height: 275.h,
                              color: Color(0xFFCDFF5F),
                            ),
                            // 白色圆点，放在线上方但不中断线条
                            Container(
                              width: 6.w,
                              height: 6.h,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                shape: BoxShape.circle,
                                border: Border.all(
                                  color: Color(0xFFCDFF5F),
                                  width: 1.w,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: 16.w),
                      // 右侧带有日期覆盖的图像
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Transform.translate(
                              offset: Offset(-8.w, 0),
                              child: imageOverlayDate,
                            ),
                            SizedBox(height: 10.h),
                            ClipRRect(
                              borderRadius: BorderRadius.circular(10.r),
                              child: Image(
                                image: ImagePath().get_post_image(image_url),
                                width: 250.w,
                                height: 250.h,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
    );
  }

  String _get_formatted_month_day(String dateKey) {
    final date = DateTime.parse(dateKey);
    final monthNames = [
      'January',
      'February',
      'March',
      'April',
      'May',
      'June',
      'July',
      'August',
      'September',
      'October',
      'November',
      'December',
    ];
    final day = date.day;
    String suffix;

    if (day >= 11 && day <= 13) {
      suffix = 'th';
    } else {
      switch (day % 10) {
        case 1:
          suffix = 'st';
          break;
        case 2:
          suffix = 'nd';
          break;
        case 3:
          suffix = 'rd';
          break;
        default:
          suffix = 'th';
      }
    }

    return "${monthNames[date.month - 1]} ${day}${suffix}";
  }
}
